<template>
<div class="choose-hotspots">
    <el-dialog custom-class="wlm-form-dialog dialog-table drag-hotspots" :append-to-body="true" :visible.sync="dialogTableVisible" @close="clearData" width="45%">
        <div class="wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">设置热区</span>
        </div>
        <div class="wlm-table-content">
            <div class="wlm-dialog-main">
                <div class="flex-row">
                    <el-scrollbar style="width:100%;height: 490px;max-height: 490px;">
                      <div class="flex-row flex-grow-1 flex-justify-c" style="position: relative;margin:0 auto;" :style="{'width': `${config.fixed}px`}">
                        <img :width="imgX" :height="imgY" :src="config.bgImg" style="z-index:0;">
                        <vue-draggable-resizable
                                :x="Number(showitem.pos_x)"
                                :handles="Array.isArray(showitem.handles) ? showitem.handles : handlesList"
                                :y="Number(showitem.pos_y)"
                                :w="Number(showitem.width)"
                                :lockAspectRatio="showitem.scale === '1'"
                                :resizable="showitem.resizable"
                                :draggable="!showitem.disabled"
                                :h="Number(showitem.height)"
                                :z="Number(showitem.z_index)"
                                v-for="(showitem, showindex) in displayData"
                                :key="showindex"
                                :parent="true"
                                @dragstop="draggableStop(...arguments,showitem)"
                                @resizestop="draggableStop(...arguments,showitem)">
                                <div class="drag-content flex-row flex-align-c flex-justify-c text-center" @dblclick="setBaseLink(showindex)">
                                  <p v-if="showitem.link == ''">双击添加链接</p>
                                  <p class="ellipsis" style="width:80%;" v-else>
                                    {{`${showitem.link.title || ''}${showitem.link.path || showitem.link.app_id || showitem.link}`}}
                                  </p>
                                </div>
                                <div class="handle-close" @click="delDragHotspots(showindex)"><i class="el-icon-close"></i></div>
                            </vue-draggable-resizable>
                      </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
        <div class="wlm-dialog-fixfooter">
            <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            size="small"
            type="primary"
            @click="addDragHotspots"
          >添加热区</el-button>
          <el-button
            size="small"
            @click="saveChoose"
          >确 定</el-button>
        </span>
        </div>
    </el-dialog>
</div>
</template>

<script>
// import VueDraggableResizable from 'vue-draggable-resizable'
import defaultConfig from './utils/config'
const dragHotW = 200
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  watch: {
    'config.initList': {
      handler(newData, oldData) {
        if (Array.isArray(newData) && newData.length > 0) {
          this.$nextTick(() => {
            this.displayData = [...newData]
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      currentIndex: -1,
      handlesList: ['br'],
      dialogTableVisible: false,
      currentRow: [],
      displayData: []
    }
  },
  computed: {
    imgX() {
      return this.config.fixed / this.config.bgx * this.config.bgx
    },
    imgY() {
      return this.config.fixed * this.config.bgy / this.config.bgx
    }
  },
  components: {
    // VueDraggableResizable
  },
  methods: {
    clearData() {
      this.currentRow = []
      this.displayData = []
      this.currentIndex = -1
    },
    toggle() {
      this.dialogTableVisible = !this.dialogTableVisible
      console.log(this.config.initList, 'this.config.initList')
      if (this.dialogTableVisible && (!Array.isArray(this.config.initList) || this.config.initList.length === 0)) {
        this.addDragHotspots()
      } else {
        this.clearData()
      }
    },
    setBaseLink(index) {
      this.currentIndex = index
      this.$emit('tabDrag', index)
    },
    saveChoose() {
      console.log(this.displayData, 'this.displayData=>saveChoose')
      const isNotLink = this.displayData.findIndex(item => item.link === '')
      if (isNotLink !== -1) {
        this.$message.error('存在未设置路径热区,请添加后保存')
      } else {
        this.output()
        this.toggle()
      }
    },
    addDragHotspots() {
      const upLen = this.displayData.length || 1
      this.displayData.push({
        link: '',
        width: dragHotW,
        height: dragHotW,
        pos_x: 0,
        pos_y: 0,
        z_index: (upLen + 1)
      })
    },
    delDragHotspots(index) {
      this.displayData.splice(index, 1)
    },
    draggableStop() {
      this.$nextTick(() => {
        const isResizes = Array.from(arguments).length === 5
        if (isResizes) {
          const [x, y, w, h, current] = arguments
          current.width = w
          current.height = h
          current.pos_x = x
          current.pos_y = y
        } else {
          const [x, y, current] = arguments
          current.pos_x = x
          current.pos_y = y
        }
      })
    },
    output() {
      if (Object.prototype.toString.call(this.changeEvt) === '[object Function]') {
        this.changeEvt({ currentRow: this.currentRow, displayData: this.displayData, key: 'DragHotspots' }, this.updateConfig.bindKey)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.choose-hotspots {
    font-size: 14px;
    margin-bottom: 10px;

    .wlm-dialog-main {
        max-height: 520px;
    }

    /deep/ .is-horizontal {
        display: none;
    }

    /deep/ .el-scrollbar__view {
        font-size: 16px;
    }
}
</style>
